<template>
  <div class="common-body">
    <breadcrumb
      :breadcrumbArr="breadcrumbArr"
      :breadcrumbLastItem="breadcrumbLastItem"
      state="detail"
      @handleBack="handleBack"
    />
    <div
      :class="[
        contractState ? 'ccui-app-container-detail' : 'detail-box',
        'ccui-clearfix'
      ]"
    >
      <!--  主体左侧内容  -->
      <div :class="[!contractState ? 'detail-info' : '']">
        <!--  审批状态 icon  -->
        <div v-if="!contractState" class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div
          v-if="isTrue"
          :class="[
            !contractState
              ? 'detail-info-form-container'
              : 'ccui-app-container-detail-body'
          ]"
        >
          <el-tabs v-model="activeName" class="el-tabs__customize">
            <el-tab-pane label="基本信息" name="first">
              <detailBaseInfo
                ref="baseInfo"
                labelWidth="130px"
                :formList="baseFormList"
                :detail="details"
              />
            </el-tab-pane>

            <el-tab-pane label="采购清单" name="second">
              <detailPurchaseList
                ref="purchaseList"
                :detailPurchaseData="detailPurchaseData"
              />
            </el-tab-pane>

            <el-tab-pane label="附件" name="third" class="file-group">
              <contractAnnex
                v-if="isTrue"
                ref="attachment"
                isTab
                v-model="fileList"
                state="detail"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--右边审批状态-->
      <!--  右边审批状态  -->
      <approval-read-record
        v-if="!contractState && isTrue"
        :approvalRecordData="approvalRecordData"
      />
    </div>
    <!--  按钮  -->

    <!--  底部导航栏及签名导出  -->
    <!-- v-if="$route.query.states !== 'move-store-detail'" -->
    <!--    移庫-->
    <bottomGuide
      busiType="118"
      v-if="isTrue && $route.query.states !== 'move-store-approval'"
      pageType="moveinventory/detailExport"
      :approvalStatus="approving"
      :curPageId="$route.query.id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>

<script>
import detailBaseInfo from "@/basa/components/public/detailBaseInfo";
import detailPurchaseList from "../components/detailPurchaseList.vue";
import contractAnnex from "@/basa/components/public/uploadInfo2";
import { getSmpMoveInventoryById } from "../api";
import { formatNumber } from "@/basa/utils";
import approvalReadRecord from "@/basa/components/public/approvalRecord";
import publicComponent from "@/basa/components/public";
import { cloneDeep } from "lodash";
import jsList from "../js";
export default {
  components: {
    detailBaseInfo,
    detailPurchaseList,
    contractAnnex,
    approvalReadRecord,
    breadcrumb: publicComponent.breadcrumb,
    bottomGuide: publicComponent.bottomGuide
  },
  data() {
    return {
      businessCode: "",
      breadcrumbArr: [],
      breadcrumbLastItem: "",
      activeName: "first",
      fileList: [],
      formData: {
        reportInOrgName: "", //填报单位
        reportInOrgId: null, //填报单位id
        categoryName: "", //分类名称
        categoryCode: "", //分类名称编码
        moveInventoryName: "", //移库单名称
        moveInventoryCode: "", //移库单编号
        originalWarehouseName: "", //原仓库
        originalWarehouseId: null, //原仓库id
        originalWarehouseCode: "", //原仓库编码
        targetWarehouseName: "", //目标仓库
        targetWarehouseId: null, //目标仓库id
        targetWarehouseCode: "", //目标仓库编码
        moveInventoryCount: "", //移库数量
        moveInventoryMoney: "", //移库金额
        reportUsername: "", //编制人
        reportOpenid: "", //编制人id
        reportTime: "", //编制日期
        remark: "", //备注
        businessReason: "",//业务事由
        reportOrgDeptName: "",//填报单位部门名称
        reportInDeptCode: "",//填报单位部门编码
        reportOrgDeptId: "",//填报单位部门id
        reportInDeptExtcode: "",//填报单位部门4a编码
        targetOrgDeptId: "",//目标单位部门id
        targetInDeptCode: "",//目标单位部门编码
        targetOrgDeptName: "",//目标单位部门名称
        targetInDeptExtcode: "",//目标单位部门4a编码
        filesNumber: "",//附件张数
      },
      isTrue: false,
      detailPurchaseData: [],
      baseFormList: [
        { label: "填报单位", titleContent: "reportInOrgName" },
        { label: "部门", titleContent: "reportOrgDeptName" },
        { label: "移库单编号", titleContent: "moveInventoryCode" },
        { label: "移库单名称", titleContent: "moveInventoryName" },
        { label: "是否跨项目", titleContent: "isAcrossProject" },
        { label: "分类名称", titleContent: "categoryName" },
        { label: "原仓库", titleContent: "originalWarehouseName" },
        { label: "目标仓库", titleContent: "targetWarehouseName" },
        { label: "目标单位部门", titleContent: "targetOrgDeptName" },
        { label: "附件张数", titleContent: "filesNumber" },
        { label: "移库数量", titleContent: "moveInventoryCount" },
        { label: "移库金额", titleContent: "moveInventoryMoney" },
        { label: "编制人", titleContent: "reportUsername" },
        { label: "编制日期", titleContent: "reportTime" },
        {
          label: "业务事由",
          titleContent: "businessReason",
          title: true,
          span: 18
        },
        {
          label: "备注",
          titleContent: "remark",
          title: true,
          span: 18
        },
      ],
      details: {},
      contractState: "",
      approving: "", // 审批状态
      approvingStatus: true, // 审批状态展示
      approvingType: {
        1: "approving", // 审批中
        2: "withdrawn", // 已撤回
        3: "approvaled", // 审批通过
        4: "sendback", // 审批退回
        5: "unapproval" // 审批不通过
      },
      approvalRecordData: []
    };
  },
  methods: {
    submitHandleKeep() {},
    submitHandle() {},
    // 返回
    handleBack() {
      this.$router.go(-1);
    },
    getList() {
      getSmpMoveInventoryById({ id: this.$route.query.id }).then(res => {
        // 基本信息
        this.details = res.data.data.smpMoveInventory;
        this.businessCode = this.details.moveInventoryCode;
        this.details.moveInventoryMoney = Number(
          this.details.moveInventoryMoney
        ).toFixed(2); //移库金额
        this.details.moveInventoryCount = formatNumber(
          this.details.moveInventoryCount,
          3
        ); //移库数量
        this.details.reportTime = this.details.reportTime.substring(0, 10);
        // 是否跨项目
        let str = { 0: "否", 1: "是" };
        this.details.isAcrossProject = [0, 1].includes(
          this.details.isAcrossProject
        )
          ? str[this.details.isAcrossProject]
          : "";
        // 采购清单
        this.detailPurchaseData = res.data.data.smpMoveInventoryBill;
        this.detailPurchaseData.forEach((item, index) => {
          item.storageCount = formatNumber(Number(item.storageCount), 3); //库存数量
          item.unStorageCount = formatNumber(Number(item.unStorageCount), 3); //可用库存数量
          item.unitPriceWithTax = Number(item.unitPriceWithTax).toFixed(2); //含税单价
          item.moneyWithTax = Number(item.moneyWithTax).toFixed(2); //含税金额
          item.transferLibraryCount =
            item.transferLibraryCount == 0
              ? formatNumber(0, 3)
              : formatNumber(Number(item.transferLibraryCount), 3); //移库数量
        });
        console.log(this.detailPurchaseData);
        this.breadcrumbLastItem = this.details.moveInventoryName;
        // 附加信息
        this.fileList = res.data.data.moveInventoryFiles;

        this.contractState = !res.data.data.approveRecords.length;

        this.approvalRecordData = res.data.data.approveRecords;
        this.approvalRecordData.forEach(item => {
          if (item.operState === 0) {
            item.icon = "el-icon-time";
            item.color = "#F5A623";
          }
        });
        if (
          ["move-store-approval", "move-store-detail"].includes(
            this.$route.query.states
          )
        ) {
          this.breadcrumbArr = cloneDeep(jsList.breadcrumbArr);
          this.breadcrumbArr.splice(2, 1, {
            path: "/inventoryManagement/move-examine",
            text: "财务移库审批"
          });
        } else if (["accountDetail"].includes(this.$route.query.states)) {
          this.breadcrumbArr = cloneDeep(jsList.breadcrumbArr);
          this.breadcrumbArr.splice(2, 1, {
            path: "/inventoryManagement/move-store-account",
            text: "财务移库台账"
          });
        } else {
          this.breadcrumbArr = jsList.breadcrumbArr;
        }
        this.isTrue = true;
        this.approving = this.approvingType[this.details.approvalStatus];
        this.approvingStatus = false;
        this.$nextTick(() => {
          this.approvingStatus = true;
        });
      });
    }
  },
  activated() {
    this.activeName = "first";
    this.getList();
  },
  beforeRouteLeave() {
    this.isTrue = false;
    this.breadcrumbArr = jsList.breadcrumbArr;
  }
};
</script>

<style lang="scss" scoped>
.commonClass {
  margin-top: 5px;
}
</style>
